<script setup>
import { showDialog } from 'vant';
import { ref } from "vue"
let token = ref(localStorage.getItem("token"))
let username = ref(localStorage.getItem("username"))
let falg = ref("")
console.log(username);
// 推出登录
function quit() {
    console.log(11);
    localStorage.removeItem("token")
    localStorage.removeItem("username")
    showDialog({
        message: '退出成功',
    }).then(() => {
        username.value = "登录 "
        falg.value = false
    });
}
if (token.value == null) {
    username.value = "点击登录 "
    falg.value = false
} else if (token.value != null) {
    falg.value = true
}


</script>

<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <el-button type="success" @click="$router.push(`/login`)">
                    {{ username }}
                </el-button>
                <el-button type="primary" @click="quit()" v-show="falg">退出登录</el-button>
            </el-header>
            <el-container>
                <el-aside width="200px">

                    <!-- 左边菜单 -->
                    <el-row>
                        <el-col>

                            <el-menu default-active="2" class="el-menu-vertical-demo" router>
                                <el-menu-item index="/shouye">
                                    <el-icon><icon-menu /></el-icon>
                                    <span>欢迎</span>
                                </el-menu-item>
                                <!-- 公告管理 -->
                                <el-menu-item index="/NoticeManage">
                                    <el-icon><icon-menu /></el-icon>
                                    <span>公告管理</span>
                                </el-menu-item>
                                <!--  -->
                                <!--  轮播图管理-->
                                <el-sub-menu index="2">
                                    <template #title>
                                        <el-icon>
                                            <location />
                                        </el-icon>
                                        <span>轮播图管理</span>
                                    </template>
                                    <el-menu-item-group>
                                        <el-menu-item index="/LunBotuClassfy">轮播图分类</el-menu-item>
                                        <el-menu-item index="/LunBotuList">轮播图列表</el-menu-item>
                                    </el-menu-item-group>
                                </el-sub-menu>
                                <!--  -->

                                <!-- 用户管理 -->
                                <el-sub-menu index="">
                                    <template #title>
                                        <el-icon>
                                            <location />
                                        </el-icon>
                                        <span>用户管理</span>
                                    </template>
                                    <el-menu-item-group>
                                        <el-menu-item index="/UserList">用户列表</el-menu-item>
                                    </el-menu-item-group>
                                </el-sub-menu>

                                <!--  -->
                                <!-- 商品管理 -->
                                <el-sub-menu index="4">
                                    <template #title>
                                        <el-icon>
                                            <location />
                                        </el-icon>
                                        <span>商品管理</span>
                                    </template>
                                    <el-menu-item-group>
                                        <el-menu-item index="/ShopList">商品列表</el-menu-item>
                                        <el-menu-item index="/ShopClassify">商品分类</el-menu-item>
                                    </el-menu-item-group>
                                </el-sub-menu>
                                <!--  -->
                                <!-- 订单管理 -->
                                <el-menu-item index="/Orders">
                                    <el-icon><icon-menu /></el-icon>
                                    <span>订单管理</span>
                                </el-menu-item>
                                <!--  -->
                                <!-- 论坛管理 -->
                                <el-sub-menu index="6">
                                    <template #title>
                                        <el-icon>
                                            <location />
                                        </el-icon>
                                        <span>论坛管理</span>
                                    </template>
                                    <el-menu-item-group>
                                        <el-menu-item index="/Forums">板块管理</el-menu-item>
                                        <el-menu-item index="/Comments">讨论管理</el-menu-item>
                                    </el-menu-item-group>
                                </el-sub-menu>
                                <!--  -->
                                <!-- 资讯管理 -->
                                <el-sub-menu index="7">
                                    <template #title>
                                        <el-icon>
                                            <location />
                                        </el-icon>
                                        <span>咨询管理</span>
                                    </template>
                                    <el-menu-item-group>
                                        <el-menu-item index="7-1">分类管理</el-menu-item>
                                        <el-menu-item index="7-2">资讯管理</el-menu-item>
                                    </el-menu-item-group>
                                </el-sub-menu>
                                <!--  -->
                            </el-menu>
                        </el-col>
                    </el-row>
                </el-aside>

                <!-- 右边信息栏 -->
                <el-main>
                    <RouterView />
                </el-main>
            </el-container>
        </el-container>
    </div>
    <!-- <RouterView /> -->

</template>
